<template>
	<view class="page">
		<!-- <up-navbar title="" @rightClick="{}" :autoBack="true" bgColor="#fff" placeholder></up-navbar> -->
		<view class="content" style="flex: 1;">
			<view class="width-full flex column items-center fontSize-28 weight-700">
				<image class="imageBj" src="https://bbsf.oss-cn-shanghai.aliyuncs.com/english/icons/sahua.gif" mode="aspectFit"></image>
				<view class="">
					哇！你已完成今日的任务
				</view>
				<view class="">
					快查看下今日的学习成果吧
				</view>
			</view>
			<view class="marginTop-20 flex column fontSize-28 box-sizing paddingLeft-30 paddingRight-30">
				<view class="gridItems flex width-full space-between " v-for="(item,index) in list" :key="index">
					<!-- {{item}}{{index}}111 -->
					<view class="gridItem">
						<view class="">
							{{keys[index][0]}}
						</view>
						<view class="numVal">
							{{index == 'time'?returnTime(item.today):item.today}} {{keys[index][2]}}
						</view>
					</view>
					<view class="gridItem">
						<view class="">
							{{keys[index][1]}}
						</view>
						<view class="numVal">
							{{index == 'time'?returnTime(item.avg):item.avg}} {{keys[index][2]}}
						</view>
					</view>
					<view class="gridItem">
						<!-- <up-parse :content="returnDom(item,index)"></up-parse> -->
						<view class="flex">
							{{returnVal(item,index)>0?'升高':returnVal(item,index)<0?'降低':'持平'}}

							<up-icon v-if="returnVal(item,index)!=0"
								:name="`${returnVal(item,index)>0?'arrow-upward':'arrow-downward'}`"
								:color="`${returnVal(item,index)>0?'#51e037':'#ff0f0f'}`" size="16"></up-icon>

						</view>
						<view class="numVal">
							{{Math.abs(returnVal(item,index))}} {{keys[index][2]}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="btns box-sizing">
		    <view class="btnBox">
			    <up-button @click="btnClick('index/brushWords')" size = "normal" type="primary"  text="继续刷"></up-button>
		    </view>
		    <view class="btnBox">
			    <up-button @click="btnClick()" size = "normal" type="primary"  text="记单词"></up-button>
		    </view>
		</view> -->
		<view class="width-full box-sizing btns flex column items-center flex-center">
			<view class="marginTop-30 flex flex-center" >
				<view class="next_btn" @click="btnClick('index/index')">
				继续刷
				</view>
		
			</view>
		<!-- 	<view class="marginTop-30 flex flex-center" style="width: 80vw;">
				<up-button @click="btnClick('index/index')" size="normal" type="primary" text="记单词"></up-button>
			</view> -->
		</view>

	</view>
</template>

<script setup>
	import {
		onReady
	} from '@dcloudio/uni-app'
	import {
		inject,
		ref
	} from 'vue'

	const keys = ref({
		group: ['今日组数', '平均每日', '组'],
		word: ['今日词量', '平均每日', ''],
		unknow: ['今日生量', '平均每日', ''],
		time: ['今日用时', '平均用时', ''],
	})
	const infoApi = inject('finishWord')
	const info = ref({});
	const list = ref({});
	const getInfo = () => {
		infoApi().then(res => {
			list.value = res
		})
	}
	getInfo();

	const returnTime = (it) => {
		if (it <= 0) return '00′00″'
		let mm = Math.floor(parseInt(it) / 60);
		let mmVal = mm > 9 ? mm : '0' + mm;
		let ss = (it % 60) > 9 ? it % 60 : '0' + it % 60;
		return mmVal + '′' + ss + '″'
	}
	const returnVal = (it, key) => {
		let today = it.today;
		let avg = it.avg;
		let diff = parseInt(today) - parseInt(avg)
		return diff
	}
	const btnClick = (url) => {
		uni.redirectTo({
			url: '/pages/' + url
		})
		// if(Object.keys(info.value).length>0){
		// 	if(info.value.phone&&info.value.phone!=''&&url == ''){
		// 		uni.navigateTo({ url: '/pages/'+url  })
		// 	}else{
		// 		uni.navigateTo({ url: '/pages/'+url  })
		// 	}
		// }else{
		// 	uni.navigateTo({
		// 		url:'/pages/login/login'
		// 	})
		// }
	}
</script>

<style lang="scss">
	.imageBj {
		height: 500rpx;
		width: 100%;
		scale: 1.15;
	}

	.gridItems {
		border-bottom: 1rpx solid #ededed;
		// padding-bottom: 30rpx;
	}

	.gridItem {
		width: 33.33%;
		height: 150rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		// border-bottom: 1rpx solid #ededed;
		// padding-bottom: 30rpx;
		.numVal {
			color: #8c8c8c;
			font-size: 26rpx;
			margin-top: 10rpx;
		}
	}

	.btns {
		padding-bottom: calc(50rpx);
	}
	.next_btn{
		width: 686rpx;
		height: 108rpx;
		background: #4AD27A;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		margin: 20rpx auto;
		text-align: center;
		line-height: 108rpx;
		font-weight: 500;
		font-size: 40rpx;
		color: #FFFFFF;
	}
</style>